<template>
  <div class="box scroll-box">
    <el-scrollbar>
      <div class="padding">
        <div class="flex">
          <el-form :inline="true" :model="where" label-position="top">
            <el-form-item>
              <el-select v-model="where.checkout_id" @change="getData()" :disabled="loading">
                <el-option :label="plugin.lang('all')" :value="0" />
                <el-option
                  v-for="(item, index) in checkout"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="where.time" @change="getData()" :disabled="loading">
                <el-option
                  v-for="(item, index) in plugin.langTm('time')"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" :loading="loading" @click="onPrint" plain>
              <template #icon>
                <i class="iconfont min icon-invoice-max"></i>
              </template>
              {{ lang.t('common.print') }}
            </el-button>
            <el-button type="primary" :loading="loading" @click="getData">
              <template #icon>
                <i class="iconfont min icon-exchangerate"></i>
              </template>
              {{ plugin.lang('button.' + (loading ? 'load' : 'get')) }}
            </el-button>
          </div>
        </div>
        <el-row :gutter="25">
          <el-col :span="6">
            <div class="total flash" :class="{ on: name == 'total' }" @click="name = 'total'">
              <div class="name">{{ plugin.lang('order.total') }}</div>
              <div class="money font-number">{{ money(data.total) }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total flash" :class="{ on: name == 'tax' }" @click="name = 'tax'">
              <div class="name">{{ plugin.lang('order.tax') }}</div>
              <div class="money font-number">{{ money(data.tax) }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total flash" :class="{ on: name == 'profit' }" @click="name = 'profit'">
              <div class="name">{{ plugin.lang('order.profit') }}</div>
              <div class="money font-number">{{ money(data.profit) }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total flash" :class="{ on: name == 'count' }" @click="name = 'count'">
              <div class="name">{{ plugin.lang('order.count') }}</div>
              <div class="money font-number">{{ data.count }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="25">
          <el-col :span="18">
            <div class="total flash">
              <div class="title">{{ plugin.lang('order.charts') }}</div>
              <Charts :name="name" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total flash">
              <div class="title">{{ plugin.lang('order.pay') }}</div>
              <ChartsPay />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import model from '../model'
import checkoutModel from '@/model/account/checkout'
import Charts from './charts'
import ChartsPay from './charts_pay'

export default {
  components: {
    Charts,
    ChartsPay
  },
  setup() {
    // 收银台列表 
    const checkout = checkoutModel.list

    // 条件 
    const where = model.where

    // 数据
    const data = model.data
    // 数据指针
    const name = ref('total')

    const loading = ref(false)
    const getData = async () => {
      loading.value = true
      try{
        await model.get()
      } catch(e) {
        console.error(e)
        app.ui.message('error', 'error', 'Charts')
      }
      loading.value = false
    }

    // 没有图表数据再加载
    if(!model.time.value.length) {
      getData()
    }

    // 打印
    const onPrint = () => {
      model.print()
    }

    return {
      money: app.money,
      lang: app.lang,
      plugin: app.plugin.index,
      where,
      checkout,
      loading,
      data,
      name,
      getData,
      onPrint,
    }
  }
}
</script>